import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Text } from 'native-base';

import {
  LineItem, ImageItem,
} from './index';
import commonMethods from '../../utils/commonMethods';

class Block extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  componentDidMount() {

  }

  _showHead = () => {
    if (!this.props.data.showHeader) {
      return null;
    }
    // if (!this.props.data.headerRender) {
    //   return this.props.data.headerRender();
    // }
    return (
      <View style={styles.header}>
        <View className={styles.blockTitle}>
          <Text>{this.props.data.title}</Text>
        </View>
      </View>
    );
  }

  _showContent = () => {
    if (this.props.data.contentRender
      && commonMethods.getType(this.props.data.contentRender) === 'Function') {
      return this.props.data.contentRender(this.props.changePartsData, this.props.failurePositions);
    }
    // const contents = this.props.data.contents;
    const items = [];
    if (this.props.data.contents && this.props.data.contents.length) { // 有子模块
      for (let i = 0; i < this.props.data.contents.length; i += 1) {
        let _temp = null;
        const item = this.props.data.contents[i];
        switch (item.type) {
          case 'type':
            _temp = <Block key={i} data={item} />;
            break;
          case 'line':
            _temp = <LineItem key={i} item={item} />;
            break;
          case 'image':
            _temp = <ImageItem key={i} item={item} />;
            break;
          default:
            _temp = <LineItem key={i} item={item} />;
        }
        items.push(_temp);
      }
      // this.props.data.contents.foreach((item, index) => {
      // });
      return items;
    }

    return items;
  }

  render() {
    return (
      <View style={styles.blockContianer}>
        {this._showHead()}
        <View style={styles.blockContent}>
          {this._showContent()}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  blockContianer: {
    marginTop: 10,
    marginBottom: 10,
  },
  header: {
    backgroundColor: '#ffffff',
    borderLeftWidth: 8,
    borderLeftColor: '#4f6fe3',
    borderStyle: 'solid',
    padding: 10,
    fontSize: 17,
    fontFamily: 'PingFangHK-Regular',
  },
  blockContent: {
    paddingLeft: 18,
    fontSize: 15,
  },
});

export default Block;
